<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<link rel="stylesheet" type="text/css" href="css/modal.css"/>-->
		<style type="text/css">
			button {
				background: 0;
				border: 0;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				color: inherit;
				cursor: pointer;
				font: inherit;
				line-height: inherit;
				overflow: visible;
				vertical-align: inherit;
			}
			
			.md-modal {
				position: fixed;
				top: 50%;
				left: 50%;
				width: 535px;
				height: auto;
				-webkit-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				visibility: hidden;
				z-index: 201;
			}
			
			.md-modal-transition.md-show .md-modal-inner {
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
				opacity: 1;
				-webkit-transition: all .5s ease-out;
				transition: all .5s ease-out;
			}
			
			.md-modal-transition .md-modal-inner {
				background: #fff;
				-webkit-transform: translateY(20%);
				-ms-transform: translateY(20%);
				transform: translateY(20%);
				opacity: 0;
				-webkit-transition: all .3s ease-out;
				transition: all .3s ease-out;
			}
			
			.md-modal .md-modal-inner {
				padding: 60px 50px;
			}
			
			.md-modal .confirm-tips {
				min-height: 5.65em;
			}
			
			.md-modal .confirm-tips,
			.md-modal .alert-tips {
				font-size: 14px;
				font-weight: 200;
				text-align: center;
			}
			
			.md-modal .btn-wrap {
				margin-top: 20px;
				text-align: center;
				font-size: 0;
			}
			
			.md-modal .btn-wrap .btn {
				width: 45%;
				min-width: 80px;
				margin: 0 2.5%;
			}
			
			.md-modal .md-close {
				position: absolute;
				top: 7px;
				right: 7px;
				width: 34px;
				height: 34px;
				-webkit-transform: scale(0.5);
				-ms-transform: scale(0.5);
				transform: scale(0.5);
				text-indent: -8000px;
			}
			
			.md-modal .md-close:before,
			.md-modal .md-close:after {
				position: absolute;
				top: 16px;
				left: -4px;
				content: "";
				width: 44px;
				height: 3px;
				background: #605f5f;
				/*
				 * 动画
				 */
				-webkit-transition: -webkit-transform .5s ease-out;
				transition: -webkit-transform .5s ease-out;
				transition: transform .5s ease-out;
				transition: transform .5s ease-out, -webkit-transform .5s ease-out;
			}
			
			/*
			 * 鼠标放上     执行后
			 */
			.md-modal .md-close:hover:after {
				-webkit-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}
			
			/*
			 * 鼠标离开   执行后
			 */
			.md-modal .md-close:after {
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
			}
			
			/*
			 * 鼠标放上     执行前
			 */
			.md-modal .md-close:hover:before {
				-webkit-transform: rotate(-135deg);
				-ms-transform: rotate(-135deg);
				transform: rotate(-135deg);
			}
			
			/*
			 * 鼠标离开   执行前
			 */
			.md-modal .md-close:before {
				-webkit-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}
			
			.md-show {
				visibility: visible;
			}
		</style>
	</head>

	<body>
		<button onclick="show()">show</button>
		<button onclick="closes()">close</button>
		<div class="md-modal modal-msg md-modal-transition md-show" id="showModal" v-bind:class="{'md-show':delFlag}">
			<div class="md-modal-inner">
				<div class="md-top">
					<button class="md-close" @click="delFlag=false">关闭</button>
				</div>
				<div class="md-content">
					<div class="confirm-tips">
						<p id="cusLanInfo">你确认删除此订单信息吗?</p>
					</div>
					<div class="btn-wrap col-2">
						<button class="btn btn--m" id="btnModalConfirm" @click="delProduct">Yes</button>
						<button class="btn btn--m btn--red" id="btnModalCancel" @click="delFlag=false">>No</button>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function show() {
			var show = document.getElementById("showModal");
			show.classList.add("md-show");
		}

		function closes() {
			var show = document.getElementById("showModal");
			show.classList.remove("md-show");
		}
	</script>

</html>